<template>
    <div class="image">
        <!-- Vue项目中本地图片的使用
        静态的/不是插值绑定的,
        1.直接引用src中(也可用@)
        2.引用public文件夹中的,直接写public中的路径即可(不含public)

        src中的资源(包括图片)都会被处理,处理完的路径就会变,小图片都会转成base64(不用加载)
        public中的资源(包括图片) 不会被处理,脚手架会把文件夹中的所有文件复制/拷贝到项目最终上线的根目录中

        动态的：
            1.使用public下的
            2.使用import或者require导入src中的图片


            require不用写在JS最顶端
            import必须写到JS最顶端


            src  import导入 处理
            public 不用导入 不用处理 不用写public-->
        <h2>src中的图片</h2>
        <img src="../assets/src-img/p1.png" alt="" />
        <br/>
        <img src="@/assets/src-img/p3.webp" alt="" />
        <h2>public中的图片</h2>
        <img src="/public-img/p2.jpg" alt="" />
        <h2>插值绑定中的动态图片</h2>
        <ul>
            <li v-for="p in list" :key="p">
                <img :src="p" alt="" />
            </li>
        </ul>
    </div>
</template>

<script>
import p3 from '../assets/src-img/p3.webp'
    export default {
        data(){
            return {
                list:[
                    '../assets/src-img/p1.png',
                    'public-img/p2.jpg',
                    p3  ,
                    require('../assets/src-img/p1.png')
                ]
            }
        }
    }
</script>

<style lang="sass" scoped>

</style>
